<template>
    <div>
        <div class="table_content" v-if="state.vo1">
            <div class="table_content_button">
                <el-button v-print="print" type="primary">预览</el-button>
            </div>
            <div id="printBox" class="table_content_main">
                <div class="table_content_main_title fonts24 fontw700">{{ state.vo1.fullName }}标准简历</div>
                <table class="table_content_mains">
                    <tr class="">
                        <th class="th1">姓名</th>
                        <td class="td1">{{ state.vo1.fullName || "无" }}</td>
                        <th class="th1">性别</th>
                        <td class="td1">{{ dictFuns(state.vo1.gender, "sys_user_sex") || "无" }}</td>
                        <th class="th1">年龄</th>
                        <td class="td1">{{ state.vo1.age || "无" }}</td>
                        <th rowspan="3" class="thImge">
                            <div style="width:127px;height: 168px;">
                                <img style="width: 100%;height: 100%;" v-if="state.vo1.photoUrl" :src="state.vo1.photoUrl" alt="" />
                                <img style="width: 100%;height: 100%;" v-else src="@/assets/imgs/k1.png" alt="" />
                            </div>
                        </th>
                    </tr>
                    <tr class="">
                        <th class="th1">民族</th>
                        <td class="td1">{{ state.vo1.nation || "无" }}</td>
                        <th class="th1">籍贯</th>
                        <td class="td1">{{ state.vo1.nativePlace || "无" }}</td>
                        <th>婚姻状况</th>
                        <td class="td1">{{ dictFuns(state.vo1.marriage, "marriage") || "无" }}</td>
                    </tr>
                    <tr class="">
                        <th class="th1">政治面貌</th>
                        <td class="td1">{{ dictFuns(state.vo1.politicalOutlook, "political_outlook") || "无" }}</td>
                        <th class="th1">参加工作时间</th>
                        <td class="td1" >{{ state.vo1.startWorkTime?state.vo1.startWorkTime.slice(0,7):"无" }}</td>
                        <th class="th1">健康状况</th>
                        <td class="td1">{{ state.vo1.health || "无" }}</td>
                    </tr>
                    <tr class="">
                        <th class="th1">电子邮箱</th>
                        <td class="td1" colspan="2">{{ state.vo1.email || "无" }}</td>
                        <th class="th1">熟悉专业/有何专长</th>
                        <td class="td1" colspan="3">{{ state.vo1.majorAndSpecialty || "无" }}</td>
                    </tr>
                    <tr class="">
                        <th class="th1" rowspan="2">身份证号</th>
                        <td class="td1" rowspan="2" colspan="2">{{ state.vo1.idNumber || "无" }}</td>
                        <th class="th1">现住地址</th>
                        <td class="td1" colspan="3">{{ state.vo1.currentAddress || "无" }}</td>
                    </tr>
                    <tr class="">
                        <th class="th1">户籍地址</th>
                        <td class="td1" colspan="3">{{ state.vo1.registeredAddress || "无" }}</td>
                    </tr>
                    <tr class="">
                        <th class="th1">联系电话</th>
                        <td class="td1" colspan="2">{{ state.vo1.phoneNumber || "无" }}</td>
                        <th class="th1">紧急联系人及电话</th>
                        <td class="td1" colspan="3">{{ state.vo1.emergencyPhoneNumber || "无" }}</td>
                    </tr>
                    <tr class="">
                        <th class="th1">职业资格/专业技术（职称）</th>
                        <td class="td1" colspan="2">无</td>
                        <th class="th1">重点人群信息</th>
                        <td class="td1" colspan="3">{{ dictFuns(state.vo1.keyPopulationInformation,
                            "key_population_information") || "无"
                        }}</td>
                    </tr>
                    <!-- <tr class="">
                    <th class="th1">全日制学历</th>
                    <td class="td1" colspan="2">本科</td>
                    <th class="th1">毕业院校、 专业及毕业时间</th>
                    <td class="td1" colspan="3">成都XX大学 旅游管理 2015.9~2019.7</td>
                </tr>
                <tr class="">
                    <th class="th1">在职学历</th>
                    <td class="td1" colspan="2">硕士</td>
                    <th class="th1">毕业院校、 专业及毕业时间</th>
                    <td class="td1" colspan="3">成都XX大学 公共管理 2019.9~2022.7</td>
                </tr> -->
                    <tr class="">
                        <th class="th1" :rowspan="state.vo2.length + 1">教育经历</th>
                        <td class="td2" colspan="6" v-if="state.vo2.length == 0">
                            无
                        </td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo2" :key="index">
                        <td class="td2" colspan="6">
                            {{ item.schoolName }}  {{ item.experienceStartTime.slice(0, 7) }}至{{
                                item.experienceEndTime.slice(0, 7) }}  {{ dictFuns(item.educationLevel, "education") }} {{ item.isFullTimeEducation==1?"非全日制":"全日制" }}  {{ item.specialFieldName }} <br />
                            <!-- 专业描述：{{ item.specialFieldDescription }} <br /> -->
                            <!-- 学历证书编号：{{ item.xuexinCoding }}<br /> -->
                            学历附件：<span style="margin-right: 16px;" v-for="(items, indexs) in item.files" :key="indexs"><a
                                    :href="items.url">{{ "附件" + (indexs + 1) }}</a>
                            </span>
                        </td>
                    </tr>

                    <tr class="">
                        <th class="th1" :rowspan="state.vo3.length + 1">工作经历 （自毕业填起）</th>
                        <td class="td2" colspan="6" v-if="state.vo3.length == 0">
                            无
                        </td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo3" :key="index">
                        <td class="td2" colspan="6">
                            {{ item.companyName }} {{ item.experienceStartTime.slice(0, 7) }}至{{
                                 item.experienceEndTime? item.experienceEndTime.slice(0, 7) :"至今" }}  {{ item.positionName }} <br />
                            所在部门：{{ item.departmentName }} <br />
                            工作内容：{{ item.workDescription }}
                        </td>
                    </tr>
                    <!-- 奖惩情况 -->
                    <tr class="">
                        <th class="th1">业绩及奖惩情况</th>
                        <td class="td2" colspan="6">
                            {{ state.vo4 }}
                        </td>
                    </tr>
                    <!-- 项目经历 -->
                    <tr class="">
                        <th class="th1" :rowspan="state.vo5.length + 1">项目经历</th>
                        <td class="td2" colspan="6" v-if="state.vo5.length == 0">
                            无
                        </td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo5" :key="index">
                        <td class="td2" colspan="6">
                            {{ item.projectName }} {{ item.experienceStartTime?.slice(0, 7) }}至{{
                               item.experienceEndTime? item.experienceEndTime.slice(0, 7) :"至今"}}  {{ item.positionName }}<br />
                            项目描述：{{ item.projectDescription }}
                        </td>
                    </tr>
                    <!-- 资格证书 -->
                    <tr class="">
                        <th class="th1" :rowspan="state.vo6.length + 1">资格证书</th>
                        <td class="td2" colspan="6" v-if="state.vo6.length == 0">
                            无
                        </td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo6" :key="index">
                        <td class="td2" colspan="6">
                            {{ item.certificateName }} {{ item.issuanceTime.slice(0, 7) }} <br />
                            颁发单位：{{ item.issuanceUnit }}<br />
                            证书种类：{{ dictFuns(item.certificateType,
                                "sys_certificate_type") }}<br />
                            <!-- 证书描述：{{ item.certificateDescription }}<br /> -->
                            资格证书附件：<span style="margin-right: 16px;" v-for="(items, indexs) in item.files" :key="indexs"><a
                                    :href="items.url">{{ "附件" + (indexs + 1) }}</a>
                            </span>
                        </td>
                    </tr>
                    <!-- 培训 -->
                    <tr class="">
                        <th class="th1" :rowspan="state.vo7.length + 1">培训经历</th>
                        <td class="td2" colspan="6" v-if="state.vo7.length == 0">
                            无
                        </td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo7" :key="index">
                        <td class="td2" colspan="6">
                            {{ item.experienceName }} {{ item.experienceStartTime.slice(0, 7) }}至{{
                                 item.experienceEndTime? item.experienceEndTime.slice(0, 7) :"至今" }}  
                            <br />
                            培训课程：{{ item.experienceDescription }} <br />
                        </td>
                    </tr>
                    <!-- 技能 -->
                    <tr class="">
                        <th class="th1" :rowspan="state.vo8.length + 1">专业技能</th>
                        <td class="td2" colspan="6" v-if="state.vo8.length == 0">
                            无
                        </td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo8" :key="index">
                        <td class="td2" colspan="6">
                            {{ item.skillName }}  {{ item.masterTime }}个月  {{ dictFuns(item.proficiencyLevel,
                                "proficiency_level") }} <br />
                        </td>
                    </tr>
                    <!-- 自我评价 -->
                    <tr class="">
                        <th class="th1">自我评价</th>
                        <td class="td2" colspan="6">
                            {{ state.vo9 }}
                        </td>
                    </tr>
                    <!-- 家庭关系 -->
                    <tr class="">
                        <th class="th1" :rowspan="state.vo10.length + 2">
                            <p>家庭主要成员及重要社会关系（未婚/离异填父母、兄弟界面；已婚填配偶、子女）</p>
                        </th>

                    </tr>
                    <tr v-if="state.vo10.length == 0">
                        <td class="td2" colspan="6">
                            无
                        </td>
                    </tr>
                    <tr v-if="state.vo10.length != 0">
                        <td class="td2">称谓</td>
                        <td class="td2">姓名</td>
                        <td class="td2">出生年月</td>
                        <td class="td2">政治面貌</td>
                        <td class="td2">工作单位及职务</td>
                        <td class="td2">联系方式</td>
                    </tr>
                    <tr class="" v-for="(item, index) in state.vo10" :key="index">
                        <td class="td2">{{ item.title }}</td>
                        <td class="td2">{{ item.fullName }}</td>
                        <td class="td2">{{ item.brithDay?item.brithDay.slice(0,7):"" }}</td>
                        <td class="td2">{{  dictFuns(item.politicalOutlook,
                        "political_outlook")}}</td>
                        <td class="td2">{{ item.workUnitAndPosition }}</td>
                    <td class="td2">{{ item.contactInformationAoi }}</td>
                    </tr>
                    <!-- 本人承诺 -->
                    <tr class="">
                        <th class="th1">本人承诺</th>
                        <td class="td2" colspan="6">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            本人郑重承诺：本人向香城英才网提供应聘简历、身份信息、教育经历、工作履历、证书证件等个人信息完全真实可靠，不存在弄虚作假情况。如证实本人提供的个人信息存在虚假情况，本人愿意承担相应的法律责任。
                            <p class="th_b_p">
                                <span>本人签名</span>
                                <span>年</span>
                                <span>月</span>
                                <span>日</span>

                            </p>
                        </td>

                    </tr>
                </table>
            </div>
        </div>
        <el-empty v-else description="暂无标准简历" style="width: 100%;height: 500px;" />
    </div>
</template>

<script lang="ts" setup>
import { dictFuns } from "@/utils/dictUnit"
import { reactive, ref, watch } from 'vue'
const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const state = reactive({
    vo1: {} as any,//个人信息
    vo2: {} as any,//教育经历
    vo3: {} as any,//工作履历
    vo4: {} as any,//业绩及奖惩情况
    vo5: {} as any,//项目经历
    vo6: {} as any,//资格证书
    vo7: {} as any,//培训经历
    vo8: {} as any,//专业技能
    vo9: {} as any,//自我评价
    vo10: {} as any,//家庭
    vo11: {} as any,//本人承诺

})
watch(() => props.data, (newValue: any) => {
    console.log("简历", newValue);
    state.vo1 = newValue?.personalInformation
    console.log("个人数据：", state.vo1);
    state.vo2 = newValue?.educationExperiences
    state.vo3 = newValue?.workExperiences//工作
    state.vo4 = newValue?.personalInformation.performanceRewardsPunishments || "无"//业绩及奖惩
    state.vo5 = newValue?.projectExperiences//项目
    state.vo6 = newValue?.certificates//证书
    state.vo7 = newValue?.trainingExperiences//培训
    state.vo8 = newValue?.skills//技能
    state.vo9 = newValue?.personalInformation.selfEvaluation || "无"//自我评价
    state.vo10 = newValue?.familyMembers//家庭
    state.vo11 = newValue?.selfCommitment//本人承诺

}, { immediate: true, deep: true })

const print = ref({
    id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
    popTitle: '配置页眉标题', // 打印配置页上方的标题
    extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
    preview: false, // 是否启动预览模式，默认是false
    previewTitle: '预览的标题', // 打印预览的标题
    previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
    zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
    previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
    previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
    beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
    openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
    closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
    clickMounted() { console.log('点击v-print绑定的按钮了！') },
})
</script>
<style lang="less">
@media print {
    @page {
        size: auto;
    }

    body,
    html {
        height: auto !important;
    }
}
</style> 
<style lang="less" scoped>
.table_content {

    width: 100%;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: relative;

    .table_content_button {
        position: absolute;
        right: 36px;
        top: 36px;
    }
}

table,
table tr th,
table tr td {
    border: 1px solid #0094ff;
}

table {
    width: auto;
    min-height: 25px;
    line-height: 25px;
    text-align: center;
    border-collapse: collapse;
}

.table_content_mains {
    width: 100%;
    border: 1px solid #979797;

    tr {
        .el-row {
            width: 100%;
        }
    }

    .th_b_p {
        text-align: right;
        margin-top: 30px;
        margin-bottom: 20px;

        span {
            margin-left: 120px;

            &:nth-child(1) {
                margin-right: 220px;
            }
        }
    }

    .thImge {
        width: 127px;
        height: 168px;
    }

    .th1 {
        max-width: 130px;
        padding: 15px;
        // width: 11.5%;
        min-height: 50px;
    }


    .td1 {
        // width: 16.9%;
        height: 50px;
    }

    th {
        background: #F4F4F4;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        font-size: 18px;
        border: 1px solid #979797;

    }

    td {
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        text-align: center;
        font-size: 18px;
        border: 1px solid #979797;
    }

    .td2 {
        padding: 17px;
        text-align: left;
    }
}

.table_content_main {
    padding: 36px 36px 57px 36px;

    .table_content_main_title {
        width: 100%;
        text-align: center;
        margin-bottom: 36px;
    }
}
</style>